---
title: 'Sprites'
---

# Sprites

If the `<Sprite .. />` is declared within the `<SpriteManager .../>` then it
will automatically use that manager.

```tsx
return (
  <spriteManager name="playerManager" imgUrl="/assets/images/player.png" capacity={3} cellSize={64}>
    <sprite name="player0" />
    <sprite name="player1" cellIndex={18} position={new Vector3(-1, 0, 0)} />
    <sprite name="player2" cellIndex={44} position={new Vector3(1, 0, 0)} />
  </spriteManager>
)
```

<code src="./sprites/Sprite.tsx" />

# Sprite

The example assigns the manager automatically, searching all parent nodes. The
cell index can be updated as a prop.
